<template>
	<view>
		<view class="audio-bg rel" :style="renderWidth">
			<image :src="audioBox" class="audio-img"></image>
			<view class="audio-box df ac" @click="playBtn()">
				<view style="margin-top: -2rpx">
					<view class="small"></view>
					<view
						class="middle"
						:class="playStatus === 0 ? 'stopanimate' : ''"
					></view>
					<view
						class="large"
						:class="playStatus === 0 ? 'stopanimate' : ''"
					></view>
				</view>
				<text v-if="count || count === 0" class="ml10 f28">{{
					formatCount
				}}</text>
			</view>
			<view class="change-box" v-if="!showText" @tap="clickChangeShowText"
				><image :src="changeTextImg" class="change-img"></image
			></view>
		</view>
		<!-- <button @tap="stopVideo">暂停播放</button> -->
		<view
			class="mt20 mr20 df voice-text rel"
			v-if="showText && voiceText"
			@tap="closeText"
		>
			{{ voiceText }}
			<view class="text-close"
				><imageIcon
					:value="clearIcon"
					width="36rpx"
					height="36rpx"
				></imageIcon
			></view>
		</view>
	</view>
</template>

<script>
import clearIcon from '@/subPackagesLog/pages/workLog/icon/clear.png'
import imageIcon from '@/subPackagesLog/pages/workLog/components/imageIcon.vue'
let innerAudioContext = uni.createInnerAudioContext()
var timer
import changeTextImg from '@/static/img/change-text.png'
export default {
	props: {
		// file: {
		// 	type: String,
		// 	value: ''
		// },
		// voiceText: {
		// 	type: String,
		// 	value: '',
		// 	default: ''
		// },
		// audioTime: {
		// 	type: Number,
		// 	value: '',
		// 	default: 0
		// },
		audioArry: {
			type: Array,
			value: [],
			default: () => [],
		},
		width: {
			type: [Number, String],
			default: 200,
		},
	},
	components: {
		imageIcon,
	},
	data() {
		return {
			clearIcon,
			changeTextImg,
			yuying: 'https://yilife-oss-online-public.oss-cn-hangzhou.aliyuncs.com/10000001/1015/ADMIN/lnz8ceecuqzyital7kfhp1wnp.png?timestamp=1676863826121',
			playStatus: 0, //录音播放状态 0:未播放 1:正在播放
			count: 0,
			showText: false,
			audioBox:
				'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130655/ORG/p1or9ssi6ydoesj201ee308sw.png?timestamp=1688974982226',
			voiceText: '',
			audioTime: 0,
			file: '',
			csdFileindex: 0,
			formatCount: 0,
			audioPlay: false,
		}
	},
	mounted() {
		console.log(9999999999)
		console.log(this.audioArry)
		this.audioArry.map((item) => {
			this.audioTime = this.audioTime + item.duration
			this.count = this.count + item.duration
			this.formatSeconds(this.count)
			this.voiceText = this.voiceText + item.text
		})
		this.file = this.audioArry[0].url
		uni.setInnerAudioOption({
			obeyMuteSwitch: false,
		})
	},
	computed: {
		renderWidth() {
			const w = this.width
			if (typeof w == 'number') {
				return 'width:' + w + 'rpx;'
			}
			return 'width:' + w
		},
	},
	methods: {
		stopVideo() {
			if (this.audioPlay == false) {
				innerAudioContext.play()
			} else {
				innerAudioContext.pause()
				clearInterval(timer)
			}
		},
		// 倒计时
		countdown(val) {
			let that = this
			console.log('哈哈哈', val)
			that.count = Number(val)
			timer = setInterval(function () {
				if (that.count > 0) {
					that.count--
					that.formatSeconds(that.count)
					console.log('哈哈哈', that.count)
				} else {
					clearInterval(timer)
				}
			}, 1000)
		},
		//播放
		playBtn() {
			innerAudioContext.destroy()
			innerAudioContext = uni.createInnerAudioContext()
			// this.innerAudioContext = uni.createInnerAudioContext()
			// if(this.playStatus === 1) return
			innerAudioContext.src = this.file

			//在ios下静音时播放没有声音，默认为true，改为false就好了。
			innerAudioContext.obeyMuteSwitch = false

			//点击播放
			if (this.playStatus === 0) {
				this.playStatus = 1
				innerAudioContext.play()
				this.audioPlay = true
				// this.countdown(this.audioTime - (this.audioTime - this.count)) // 倒计时
				this.countdown(this.count)
			} else {
				console.log('暂停播放')
				this.playStatus = 0
				// innerAudioContext.pause()
				innerAudioContext.destroy()
				innerAudioContext = uni.createInnerAudioContext()
				this.csdFileindex = 0
				this.file = this.audioArry[0].url
				this.count = this.audioTime
				this.formatSeconds(this.count)
				clearInterval(timer)
			}
			// innerAudioContext.onPause(() => {
			// 	// 暂停监听
			// 	console.log('监听暂停播放!')
			// 	this.audioPlay = false
			// })
			//播放结束
			innerAudioContext.onEnded(() => {
				this.playStatus = 0
				// innerAudioContext.stop()
				// this.count = this.audioTime
				console.log('播放结束')
				clearInterval(timer)
				this.qeihuanwenjian()
			})
		},
		qeihuanwenjian() {
			let index = this.csdFileindex + 1
			if (index < this.audioArry.length) {
				this.csdFileindex = index
				let item = this.audioArry[index]
				let i = index
				console.log(i)
				this.filechange(item, i)
			} else {
				innerAudioContext.destroy()
				this.csdFileindex = 0
				this.file = this.audioArry[0].url
				innerAudioContext = uni.createInnerAudioContext()
				this.playStatus = 0
				this.count = this.audioTime
				this.formatSeconds(this.audioTime)
				clearInterval(timer)
			}
		},
		// 文件切换播放
		filechange(item, i) {
			innerAudioContext.destroy()
			innerAudioContext = uni.createInnerAudioContext()
			this.csdFileindex = i
			this.file = item.url
			// this.sliderMax = this.getTime(item.recordDuration);
			// this.timeStr = this.getTime(item.recordDuration);
			this.count--
			console.log(this.playStatus)
			this.playBtn()
		},
		//显示语音转文字
		clickChangeShowText() {
			if (!this.voiceText) {
				uni.showToast({
					title: '没有可显示的文字',
					icon: 'error',
				})
			} else {
				this.showText = true
			}
		},
		//关闭文字
		closeText() {
			this.showText = false
		},
		formatSeconds(t) {
			let mi = 60,
				hh = mi * 60,
				dd = hh * 24
			let d = this.formatBit(Math.floor(t / dd)),
				h = this.formatBit(Math.floor((t - d * dd) / hh)),
				m = this.formatBit(Math.floor((t - d * dd - h * hh) / mi)),
				s = this.formatBit(Math.floor(t - d * dd - h * hh - m * mi))
			let tstr
			if (m === '0') {
				tstr = s + '秒'
			} else {
				tstr = m + '分' + s + '秒'
			}
			this.formatCount = tstr
		},
		formatBit(v) {
			v = +v
			return v > 9 ? v : '' + v
		},
	},
}
</script>

<style scoped lang="scss">
.audio-bg {
	position: relative;
	// background-color: #ffffff;
	// border-radius: 10rpx;
	// padding-left: 20rpx;
	// padding-right: 10rpx;
	// border: 1px solid $border-6b;
}
.audio-img {
	width: 168rpx;
	height: 44rpx;
}
.audio-box {
	position: absolute;
	top: 0;
	left: 10rpx;
	font-size: 24rpx;
	line-height: 44rpx;
	color: $border-6b;
	/* line-height: 80rpx; */
	.small {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		color: $border-6b;
	}
	.middle {
		width: 34rpx;
		height: 30rpx;
		border-radius: 50%;
		margin-left: -24rpx;
		opacity: 1;
		color: $border-6b;
	}
	.large {
		width: 48rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-left: -38rpx;
		opacity: 1;
		color: $border-6b;
	}
}
.voice-text {
	padding: 20rpx 20rpx;
	font-size: 28rpx;
	background-color: $blue-color;
	border-radius: 10rpx;
	display: block;
	width: max-content;
	max-width: 90%;
}
// .audio-bg::before {
// 	content: '';
// 	position: absolute;
// 	border-top: 10rpx solid transparent;
// 	border-bottom: 10rpx solid transparent;
// 	border-left: 10rpx solid transparent;
// 	border-right: 10rpx solid $border-6b;
// 	left: -19rpx;
// 	top: 25rpx;
// }
.change-box {
	width: 66rpx;
	height: 40rpx;
	position: absolute;
	right: -50rpx;
	top: 0;
}
.change-img {
	width: 66rpx;
	height: 40rpx;
}
.text-close {
	position: absolute;
	width: 36rpx;
	height: 36rpx;
	right: -46rpx;
	top: 0;
	z-index: 9;
}
</style>
